<template>
  <el-card header="pro-data-chart场景: 单-柱状图" shadow="hover">
    <pro-data-chart
      :dataSource="chartData"
      :createChartOptions="createChartOption"
      :height="200"
    />
  </el-card>
</template>
<script>
/**
 * 这是一个柱状图事例说明:
 * 1. 创建数据源, 等价于大家之前创建的数据源方式
 * 2. 构建图形表达式详见 createChartOption 方法
 */
import ProDataChart from "mars-pro/packages/pro-data-chart";
import dataSource from "mars-pro/src/pro/mixins/dataSource/index";
import { get, post, postForm } from "mars-pro/src/pro/request";

function getChartResponseData(request, response) {
  response.$delay(1000, {
    list: [
      { year: "1951 年", sales: 38 },
      { year: "1952 年", sales: 52 },
      { year: "1956 年", sales: 61 },
      { year: "1957 年", sales: 145 },
      { year: "1958 年", sales: 48 },
      { year: "1959 年", sales: 38 },
      { year: "1960 年", sales: 38 },
      { year: "1962 年", sales: 38 },
    ],
  });
}

export default {
  mixins: [
    dataSource("chartData", post("/api/mock").mockData(getChartResponseData), {
      dataField: "list",
    }),
  ],
  components: { ProDataChart },
  methods: {
    createChartOption({chart, data, attrs}) {
      chart.interval().position('year*sales');
      chart.coordinate().transpose();
    },
  },
};
</script>

<style>
</style>